<template>
	<div class="grid-view">
		<!-- 第一个item -->
		<div class="view-item first" v-if="categoryUrl">
			<img :src="categoryUrl" alt="" />
		</div>

		<!-- 其他item -->
		<template v-for="(item, index) in productDetailss" :key="item.id">
			<div class="view-item">
				<slot>
					<grid-view-item :productDetail="item" />
				</slot>
			</div>
		</template>
	</div>
</template>

<script setup>
	const props = defineProps({
		productDetailss: {
			type: Array,
			default: () => [],
		},
		categoryUrl: {
			type: String,
			default: '',
		},
	})
</script>

<style lang="scss" scoped>
	.grid-view {
		width: $contentWidth + 18px;
		/* @include border(green); */
		@include normalFlex();
		flex-wrap: wrap;
		justify-content: flex-start;

		.view-item {
			width: 20%;
			padding-right: 18px;
			margin-bottom: 18px;
			/* @include border(); */
			height: $gridItemHeight;
			box-sizing: border-box;
			// background-color: $bgGrayColor;
			cursor: pointer;
		}

		.first {
			width: 40%;
			& > img {
				width: 100%;
				height: 100%;
				transition: all 0.2s linear;
				&:hover {
					@include hoverEffect();
				}
			}
		}
	}
</style>
